<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>computed vs watch</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 
            总结：computed vs watch
            1：能用computed实现的功能 不用 watch
            2：computed 不能实现异步任务Ajax promise setTimeout
            3: 被vue 管理的函数写成普通函数，不被vue所管理的函数最好写成箭头函数 使this指向vue
            4: 普通函数中的箭头函数this 指向不是window 他会向上查找最后查找到window
         -->
         <input type="text" name="" id="" v-model="firstName">
         <input type="text" name="" id="" v-model="lastName">
         {{fullName}}
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
    //创建Vue
    const vm = new Vue({
        el:'#root', 
        data:{
            firstName:'黎',
            lastName:'伟华',
            fullName:'黎伟华'
        },
        // 使用计算属性
        /* computed:{
            fullName:function(){
                return this.firstName + this.lastName
            }
        } */
        //使用watch
        watch:{
            firstName:function(val){
                //setTimeout 是不被Vue 所管理的函数 要写成箭头函数的形式
                //箭头函数不会创建自己的this 里面的this是vm
                setTimeout(()=>{
                    this.fullName = val + this.lastName
                },1000)
               
            },
            lastName:{
                immediate:false,
                deep:false,
                handler(val){
                    this.fullName = this.firstName + val
                }
            }
        }

    })

</script>
</html>